<template>
  <div id="swiper1">
  <ul class="content">
    <button @click="btnClick">点击</button>
   <li>BScroll测试1</li>
   <li>BScroll测试2</li>
   <li>BScroll测试3</li>
   <li>BScroll测试4</li>
   <li>BScroll测试5</li>
   <li>BScroll测试6</li>
   <li>BScroll测试7</li>
   <li>BScroll测试8</li>
   <li>BScroll测试9</li>
   <li>BScroll测试10</li>
   <li>BScroll测试11</li>
   <li>BScroll测试12</li>
   <li>BScroll测试13</li>
   <li>BScroll测试14</li>
   <li>BScroll测试15</li>
   <li>BScroll测试16</li>
   <li>BScroll测试17</li>
   <li>BScroll测试18</li>
   <li>BScroll测试19</li>
   <li>BScroll测试20</li>
   <li>BScroll测试21</li>
   <li>BScroll测试22</li>
   <li>BScroll测试23</li>
   <li>BScroll测试24</li>
   <li>BScroll测试25</li>
   <li>BScroll测试26</li>
   <li>BScroll测试27</li>
   <li>BScroll测试28</li>
   <li>BScroll测试29</li>
   <li>BScroll测试30</li>
   <li>BScroll测试31</li>
   <li>BScroll测试32</li>
   <li>BScroll测试33</li>
   <li>BScroll测试34</li>
   <li>BScroll测试35</li>
   <li>BScroll测试36</li>
   <li>BScroll测试37</li>
   <li>BScroll测试38</li>
   <li>BScroll测试39</li>
   <li>BScroll测试40</li>
   <li>BScroll测试41</li>
   <li>BScroll测试42</li>
   <li>BScroll测试43</li>
   <li>BScroll测试44</li>
   <li>BScroll测试45</li>
   <li>BScroll测试46</li>
   <li>BScroll测试47</li>
   <li>BScroll测试48</li>
   <li>BScroll测试49</li>
   <li>BScroll测试50</li>
   <li>BScroll测试51</li>
   <li>BScroll测试52</li>
   <li>BScroll测试53</li>
   <li>BScroll测试54</li>
   <li>BScroll测试55</li>
   <li>BScroll测试56</li>
   <li>BScroll测试57</li>
   <li>BScroll测试58</li>
   <li>BScroll测试59</li>
   <li>BScroll测试60</li>
   <li>BScroll测试61</li>
   <li>BScroll测试62</li>
   <li>BScroll测试63</li>
   <li>BScroll测试64</li>
   <li>BScroll测试65</li>
   <li>BScroll测试66</li>
   <li>BScroll测试67</li>
   <li>BScroll测试68</li>
   <li>BScroll测试69</li>
   <li>BScroll测试70</li>
   <li>BScroll测试71</li>
   <li>BScroll测试72</li>
   <li>BScroll测试73</li>
   <li>BScroll测试74</li>
   <li>BScroll测试75</li>
   <li>BScroll测试76</li>
   <li>BScroll测试77</li>
   <li>BScroll测试78</li>
   <li>BScroll测试79</li>
   <li>BScroll测试80</li>
   <li>BScroll测试81</li>
   <li>BScroll测试82</li>
   <li>BScroll测试83</li>
   <li>BScroll测试84</li>
   <li>BScroll测试85</li>
   <li>BScroll测试86</li>
   <li>BScroll测试87</li>
   <li>BScroll测试88</li>
   <li>BScroll测试89</li>
   <li>BScroll测试90</li>
   <li>BScroll测试91</li>
   <li>BScroll测试92</li>
   <li>BScroll测试93</li>
   <li>BScroll测试94</li>
   <li>BScroll测试95</li>
   <li>BScroll测试96</li>
   <li>BScroll测试97</li>
   <li>BScroll测试98</li>
   <li>BScroll测试99</li>
   <li>BScroll测试100</li>
  </ul>
  </div>
</template>

<script>
import BScroll from 'better-scroll';


export default {
  name: 'category',
  data() {
    return {
      scroll: null
    }
  },
  created() {
    alert('后台接口未返回')
  },
  mounted() {
    this.scroll = new BScroll(document.querySelector('#swiper1'), {
      probeType: 3,
      click: true,
      pullUpLoad:true
    })
    this.scroll.on('scroll', postion => {
      // console.log(postion);
      
    })

    this.scroll.on('pullingUp', () => {
      console.log('上拉加载更多');
      this.scroll.finishPullUp();
    })

  },
  methods: {
    btnClick() {
      console.log(this);
      
    }
  }
}
</script>

<style scoped>
  #swiper1{
    height: 200px;
    background-color: rgb(180, 133, 224);
    overflow: auto;
  }
</style>